/**** global vars ****/

:root {
    /* dimensions */
    --screenHeight: 100vh; /* dynamically set with JS */
    --mainSearchHeight: 16rem;
    --navHeight: 10rem;
    --headerHeight: 2.5rem;
    --sliderWidth: 752;
    --songHeight: 15rem;

    /* spacing */
    --chipPad: 1rem 2rem;
    --padSM: 0.4rem;
    --btnPad: 0.375rem 0.75rem;

    /* palette */
    --color-primary: #e9bd01;
    --color-secondary: orange;
    --color-tertiary: skyblue;
    --color-similar: #f5027c;
    --color-connect: #03dbf7;
    --txtColDark: rgb(68, 67, 67);
    --txtColLight: rgb(139, 138, 138);
    --accentBorder: orange;
    --btnCol: #212529;
    --color-active: white;
    --greyTransp: rgb(185 182 182 / 15%);

    /* borders */
    --bordRadSm: 0.25rem;
    --btnBord: 1px solid darkgray;
    --chipRad: 10px;

    /* timing */
    --modalOpen: 0.5s;
    --modalClose: 0.3s;
    --pageShift: 0.3s;
    --navShift: 0.2s;
    --songShift: 0.2s;

    /* background */
    --mainBg: radial-gradient(circle, #00000011 1.5%, #0000 2%) 50% 50% / 11%
            2.5%,
        radial-gradient(circle at 80% 10%, #ffffff07 1.75%, #fff0 2%) 11% 0% /
            7.4% 3.33%,
        radial-gradient(circle, #00000011 1.75%, #0000 2%) 13% 2% / 7% 6%,
        radial-gradient(circle, #ffffff07 1.5%, #fff0 5%) 2% 5% / 7% 2%,
        radial-gradient(circle, #00000011 1.75%, #0000 4%) 17% 13% / 8% 9%,
        radial-gradient(circle, #ffffff06 1.5%, #fff0 3%) 21% 23% / 4% 8%,
        radial-gradient(circle, #00000011 1.75%, #0000 3%) 23% 7% / 6% 4%,
        radial-gradient(circle, #ffffff09 1.5%, #fff0 3%) 5% 3% / 3% 5%,
        radial-gradient(circle at 70% 80%, #00000011 2.28%, #fff0 3.33%) 5% 5.5% /
            3% 4.5%,
        radial-gradient(circle at 20% 20%, #ffffff03 2.66%, #fff0 3.66%) 3% 5% /
            2% 3%,
        radial-gradient(circle at 40% 70%, #00000011 2%, #fff0 3.4%) 5% 7.5% /
            3% 4.5%,
        radial-gradient(circle at 60% 30%, #ffffff05 2%, #fff0 3%) 3% 9.5% /
            3.33% 4.44%,
        radial-gradient(130% 55% at 0 0%, #ccc3, #fff0),
        radial-gradient(farthest-side at 0 5%, #fff3, #fff0 90%),
        radial-gradient(farthest-side at 100% 95%, #0002, #0000 90%),
        radial-gradient(200% 50% at 107% 98%, #000, #0000 12%),
        radial-gradient(200% 50% at -7% 98%, #000, #0000 12%),
        radial-gradient(100% 7% at 50% 100%, #0007, #0000),
        radial-gradient(
            300% 100% at 50% 0,
            #0000,
            #0001 95%,
            #ffffff18 95.5%,
            #fff1 97%,
            #0000 99.9%
        ),
        linear-gradient(to top, #222 30%, #2220),
        linear-gradient(
                90deg,
                #222,
                #fff2 2%,
                #0000 5% 92%,
                #000a 96%,
                #fff2 98%,
                #0008 98.5%
            )
            0 0 / 100% 100% no-repeat,
        linear-gradient(90deg, #0000, #1f1e1a, #1f1e1a44),
        linear-gradient(90deg, #2a2925, #222);
    --sidebarBg: #e9bd01;
    --bShad-yellow: inset -2px -2px 2px 0px #3a3939a1,
        inset 2px 2px 10px 0px #ffc605b0, -1px -1px 0px 1px #ffd400,
        5px 5px 15px 0px #f7cd00;
    --bShad-yellow-inset: inset 0 0 15px 1px #4e4e4d69,
        inset 1px 1px 4px 1px #0606068c, 1px 1px 1px 3px #f5ce0091;
}

/**** Normalize ****/

*,
::before,
::after,
a-component * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    position: relative;
    width: 100%;
    height: var(--screenHeight);
    overflow: hidden;
    font-size: 2.2rem;
    color: var(--txtColDark);
}

.app-header {
    position: absolute;
    color: var(--txtColLight);
    font-size: 1.8rem;
    height: var(--headerHeight);
    display: grid;
    width: 100%;
    place-items: center;
}

button {
    background: none;
    outline: none;
    border: none;
}

.action-btn[disabled],
button.disabled,
ul.disabled > li {
    pointer-events: none !important;
    opacity: 0.5 !important;
}

a {
    text-decoration: none;
    color: inherit;
}
p {
    margin: 0;
}
h1,
h2 {
    margin: 0;
}
ul,
li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
/*** alpine shizzle ***/

[x-cloak] {
    display: none !important;
}

/*** utility classes ***/

.general-input {
    color: var(--color-secondary);
    background: var(--txtColDark);
    padding-left: 1em;
    font-size: 1em;
    border-radius: 3rem;
    outline: none;
    border: none;
    box-shadow: inset 0 0 5px 1px #0000004d, inset 2px 2px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982;
}

.grid {
    display: grid;
}

.h-full {
    height: 100%;
}

.max-h-full {
    max-height: 100%;
}

.bg-grey-transp {
    background: var(--greyTransp);
}

.b-rad-m {
    border-radius: 1em;
}

.color-primary {
    color: var(--color-primary);
}

.color-secondary {
    color: var(--color-secondary);
}

.color-dark {
    color: var(--txtColDark);
}

.color-light {
    color: var(--txtColLight);
}

/**** app ****/

main {
    height: var(--screenHeight);
    background: var(--mainBg);
    overflow: hidden;
}

main.shifted .bottom-nav {
    transform: translateY(18rem);
    transition: transform var(--navShift) ease-out;
}

main.shifted .search-wrapper {
    transition: transform var(--pageShift) ease-out var(--navShift);
}

main.shifted.left .search-wrapper {
    transform: translateX(-50%) scale(0.8);
}

main.shifted.right .search-wrapper {
    transform: translateX(50%) scale(0.8);
}

/*** buttons ***/

.action-btn {
    outline: none;
    border: var(--btnBord);
    background: var(--color-primary);
    border-radius: var(--bordRadSm);
    color: var(--btnCol);
    padding: var(--btnPad);
    margin: 0.3rem 0;
}
.action-btn:hover {
    border: 1px solid white;
}

.action-btn:active {
    border: 1px solid var(--accentBorder);
}

.btn-modal-close {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 6rem;
    height: 6rem;
    margin: 2rem;
    padding: 1rem;
}
.btn-modal-close {
    --color: var(--color-primary);
}

.btn-modal-action {
    width: 6rem;
}

.btn-main-sidebar,
.btn-modal-close,
.btn-song-action {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #eee8;
    border: 1px solid black;
    background: linear-gradient(135deg, #2e2c2d00, #1e1c1d88), var(--bg);
    box-shadow: 0 0 0.25vmin #000c, 0 0 0.1vmin 0.1vmin #0003,
        inset 0 0 0.25vmin #0008, inset 0.25vmin 0.25vmin 0.25vmin #fff1,
        inset -0.25vmin -0.25vmin 0.25vmin #0005,
        inset 0 -0.25vmin 0.75vmin -0.25vmin;
    transition: border 0.1s ease-out;
}

.btn-song-action .icon,
.btn-modal-close .icon,
.btn-modal-close:hover,
.btn-song-action:hover {
    --bg: #2e2d2d;
    color: var(--color);
    transition: color 0.1s ease-in-out;
}

.btn-song-action:disabled .icon,
.btn-modal-close:disabled .icon {
    color: var(--txtColLight);
}

.btn-modal-close:hover {
}

.btn-main-sidebar:active,
.btn-modal-close:active,
.btn-song-action:active {
    border-color: var(--color);
    transition: none;
}

.icon.reverse {
    transform: rotate(180deg);
}

.btn-song-action .icon {
    width: 55%;
    height: 55%;
}

.btn-song-action.show {
    --color: limegreen;
}
.btn-song-action.edit {
    --color: orange;
}
.btn-song-action.delete {
    --color: red;
}
.btn-song-action.similar {
    --color: var(--color-similar);
}
.btn-song-action.connect .icon {
    fill: var(--color-connect);
}

.btn-song-action label {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* switch button */

.switch-button {
    --width: 75px;
    --offset: 5px;
    --height: calc(var(--width) / 1.75);
    width: 8rem; /* fallback */
    height: 4rem; /* fallback */
    width: var(--width);
    height: var(--height);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 2rem;
    padding: 0;
    flex-shrink: 0;
}

.radio-hidden,
.hidden-mobile,
.checkbox-hidden {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

.switch-label {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 1em;
    box-shadow: inset 0 0 0px 1px #8583838c, inset 0 0 2px 2px #7e7d7d42;
}
.switch-label::before {
    content: "";
    display: block;
    width: 40%;
    width: calc(var(--width) / 2 - var(--offset) * 2);
    height: inherit;
    border-radius: inherit;
    background: var(--greyTransp);
    box-shadow: inset 1px 1px 1px 1px #0000009c, inset 2px 2px 5px 1px #6663639e;
    transition: width 0.15s ease-in;
}
.switch-label.on::before {
    width: 100%;
}
.switch-label::after {
    content: "";
    width: calc(var(--width) / 2 + var(--offset));
    height: calc(var(--width) / 2 + var(--offset));
    display: block;
    top: 50%;
    position: absolute;
    border-radius: 50%;
    background: var(--color-primary);
    transform: translate(0%, -50%);
    transition: transform 0.15s ease-in;
    box-shadow: 1px 1px 3px 1px #060606, inset 0 0 3px 0px #1616168c;
}
.switch-label.on::after {
    transform: translate(calc(100% - var(--offset) * 2), -50%);
}

/*** search filters ***/

.search-filter-wrapper {
    width: 100%;
    height: inherit;
    position: relative;
}

.search-filter {
    margin-top: 2rem;
}

.filter-results-count {
    display: flex;
    justify-content: flex-end;
    padding: 0.2rem 0;
    padding-right: 1rem;
    font-size: 1.6rem;
    color: var(--color-secondary);
    text-shadow: 2px 2px 3px #101010d8;
}

.search-filter-results {
    max-height: 85%;
    overflow: auto;
    padding: 0 1em;
    position: relative;
    background: linear-gradient(
        to right,
        #544504 2px,
        #62615f 2px,
        #d1d0cf 4px,
        transparent 4px
    );
}

.search-filter-option {
    cursor: pointer;
    font-size: 1.5em;
    color: #6a6a68;
    border-bottom: 1px solid #6a6a68;
}

.search-filter-option:active mark,
.search-filter-option:active {
    color: var(--color-secondary);
    text-shadow: none;
}

mark {
    border-radius: 0.8rem;
    background: transparent;
    box-shadow: inset 0px -1px 1px (var(--color-secondary));
    padding: 0;
    margin: 0;
    color: var(--txtColLight);
    text-shadow: 2px 2px 3px #101010d8;
}

mark.match {
    color: var(--color-secondary);
}

/*** side bar main ***/

.side-bar-main-wrapper {
    position: fixed;
    top: 0;
    left: -20%;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--sidebarBg);
    transform: translateX(-100%) scale(0.8);
    transition: transform var(--modalClose) ease-in;
    will-change: transform;
}

.side-bar-main-wrapper.open {
    transform: translateX(0%);
    transition: transform var(--modalOpen) cubic-bezier(0.35, 0.08, 0.61, 1.62)
        var(--navShift);
}

.btn-main-sidebar {
    color: var(--color-secondary);
    position: absolute;
    width: 6rem;
    height: 6rem;
    margin: 0.2rem;
    padding: 1rem;
    border-radius: 1rem;
}

.side-bar-main-wrapper .btn-side-bar-main-close {
    right: 0;
}

.side-bar-main-container {
    width: 100vw;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.sidebar-tab {
    padding: 2rem;
    box-shadow: inset 0 0 0 1px limegreen;
}

.filter-options-content {
    display: grid;
    gap: 4rem;
}

.sort-options {
    background: transparent;
}
.filter-options {
    position: relative;
    background: transparent;
}

/** sorting **/

.sort-options-content {
    height: 50vw;
}

.sort-results-list {
    /* count = 6 */
    --buttonTrans: 0.2s;
    --buttonWidth: 25vw;
    --offset: 60;
    --turn: 90;
    --angle: calc((360 - var(--offset)) / var(--count)); /* angle = 50 */
    /* take middle of gap -  index starts at 0 */
    --openAngle: calc(
        360 - (var(--angle) * (var(--count) - 1))
    ); /* openAngle = 110 */
    --corr: calc((var(--turn) + (var(--openAngle) / 2))); /* corr = 145 */
    position: relative;
    width: calc(var(--buttonWidth) * 2);
    height: calc(var(--buttonWidth) * 2);
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    transform: rotate(calc(var(--corr) * 1deg));
    background: linear-gradient(45deg, #f5a804, transparent);
}
.sort-results-list-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
        rotate(calc(var(--i) * var(--angle) * 1deg)) translate(28vw)
        rotate(calc(var(--i) * var(--angle) * -1deg - (var(--corr) * 1deg)));
    transition: color var(--buttonTrans) ease-out;
}

.sort-results-list-item:active {
    color: var(--txtColLight);
    transition: none;
}

.sort-results-list-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--buttonWidth);
    height: var(--buttonWidth);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(
            #959393ed 0%,
            #4a4a49f0 5%,
            #7e7c7ce3 15%,
            #9d9b9b 20%,
            #c3c0c09e 33%
        ),
        #040404;
    box-shadow: inset 0 0 0 5px var(--color-secondary),
        0px 1px 5px 8px rgb(28 28 28), 2px -3px 3px 5px #afadad,
        0px 0px 0px 30px var(--txtColDark);
}

/* rotary button */

.sort-results-list-indicator {
    position: relative;
    width: 101%;
    height: 0.5rem;
    display: flex;
    justify-content: flex-end;
    transform: rotate(calc(var(--i) * var(--angle) * 1deg));
    transition: transform var(--buttonTrans) ease-in;
}

.sort-results-list-indicator::after {
    content: "";
    width: 30%;
    height: 100%;
    border-radius: 5rem;
    background: var(--color-secondary);
    filter: drop-shadow(0px 0px 8px var(--color-secondary));
    background: linear-gradient(
        to top,
        var(--color-secondary) 10%,
        #f7e401 75%,
        var(--color-secondary) 75%
    );
}

input[name="orderByColumn"] {
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
}

input[name="orderByColumn"] + label {
    color: inherit;
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding-bottom: 0.2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 8rem;
    cursor: pointer;
    border-radius: 2rem;
    box-shadow: 0 0 0 1px var(--txtColDark);
    transition: border 0s linear var(--buttonTrans);
}

input[name="orderByColumn"] + label::before {
    --linkCorr: calc(20vw / -2);
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    background: var(--txtColDark);
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%)
        rotate(calc(var(--i) * var(--angle) * 1deg))
        rotate(calc(var(--corr) * 1deg)) translateX(var(--linkCorr));
    transition: background-color 0s ease-in-out var(--buttonTrans);
}

input[name="orderByColumn"]:checked + label {
    background: var(--txtColDark);
    color: #ffe000;
    transition: color 0s ease-in-out var(--buttonTrans);
}

input[name="orderByColumn"]:checked + label::before {
    background: radial-gradient(#f3da72, #f3a903fc 60%);
    box-shadow: -1px 1px 2px 1px #201e1e, 1px -1px 0px 0px #f5cd0aeb;
}

/** filtering **/

/* main filters */

.sidebar-filters-main {
    display: grid;
    gap: var(--padSM);
}

.main-filter-items {
    display: grid;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.main-filter-fields,
.main-filter-collections {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.main-filter-collections .action-btn {
    position: absolute;
    top: 1rem;
    right: 2rem;
    border: none;
    border-radius: 1.5rem;
    width: 6rem;
    height: 6rem;
    box-shadow: var(--bShad-yellow);
}

.main-filter-collections .action-btn:active {
    color: rgb(88 87 87);
    box-shadow: var(--bShad-yellow-inset);
    transition: all 0.1s;
}

.main-filter-collections .action-btn .icon {
    stroke: none;
    fill: var(--txtColDark);
}

input[data-role="main-search-filter"] {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
}
input[data-role="main-search-filter"]:checked + label {
    background: var(--color-secondary);
}
.chip {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 10rem;
    padding: var(--chipPad);
    background: transparent;
    cursor: pointer;
    border-radius: 3rem;
    text-transform: lowercase;
    box-shadow: inset 0 0 0 1px var(--txtColDark);
}

.chip:active {
    color: var(--txtColLight);
}

/* other filters */

.sidebar-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2rem 3rem;
    place-items: center;
    margin: 0 auto;
}

.login-option-card,
.sidebar-filter-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25vw;
    height: 25vw;
    border-radius: 3rem;
}

.login-option-card .action-btn,
.sidebar-filter-card .action-btn {
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    border-radius: inherit;
    border: none;
    box-shadow: var(--bShad-yellow);
}

.login-option-card .action-btn .icon,
.sidebar-filter-card .action-btn .icon {
    stroke: none;
    fill: var(--txtColDark);
}

.login-option-card .action-btn:active,
.sidebar-filter-card .action-btn:active {
    color: rgb(88 87 87);
    box-shadow: var(--bShad-yellow-inset);
    transition: all 0.1s;
}

.login-option-card .action-btn:active .icon,
.sidebar-filter-card .action-btn:active .icon {
    fill: rgb(88 87 87);
}

/** slideout modals **/

.page-modal {
    color: var(--txtColLight);
    grid-template-rows: 8rem 1fr;
    gap: 2rem;
    height: var(--screenHeight);
}

.modal-wrapper {
    height: 100%;
    overflow: hidden;
}

.modal-heading {
    position: relative;
    width: 80%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--accentBorder);
}

.page-modal .chip {
    background: var(--color-primary);
}

.modal-heading h1 {
    font-size: 2em;
    color: var(--color-secondary);
}
.modal-heading-action {
    font-size: 1.3em;
    color: var(--txtColLight);
}

.slideout-modal {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--screenHeight);
    z-index: 30;
    background: var(--mainBg);
    transform: translateX(100%);
    transition: transform var(--modalClose) ease-in;
}

.slideout-modal.open {
    transform: translateX(0%);
    transition: transform var(--modalOpen) cubic-bezier(0.35, 0.08, 0.61, 1.62)
        var(--navShift);
}

.modal-actions-wrapper {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
}

.page-modal-content {
    background: transparent;
    height: 80%;
    overflow: auto;
}

.modal-actions-wrapper .btn-song-action {
    aspect-ratio: 1;
}

.btn-popup-close {
    position: relative;
}

.btn-popup-close::after {
    content: "";
    display: block;
    position: absolute;
    width: 5rem;
    height: 5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.popovers,
.popups {
    position: absolute;
    z-index: 40;
    background: #06060659;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
    transform: translate(-100%, -100%);
}

.popovers.open,
.popups.open {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 1;
    pointer-events: all;
    transform: translate(-0%, -0%);
}

.popovers-wrapper,
.popups-wrapper {
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    border-radius: 1em;
    padding: 1em;
    max-height: 79%;
    transform: translate(-50%, -50%) scale(0.2);
    transition: transform 0.1s ease-out;
}

.popovers.open .popovers-wrapper,
.popups.open .popups-wrapper {
    transform: translate(-50%, -50%) scale(1);
}

.popups-wrapper {
    background: var(--color-primary);
    box-shadow: 0 0 0 2px black;
}

.popovers-wrapper {
    color: var(--txtColLight);
    background: var(--txtColDark);
}

.popups.open .popups-wrapper {
    width: 95%;
}

.popovers.open .popovers-wrapper {
    width: 90%;
}

.popovers.open .popovers-wrapper,
.popups.open .popups-wrapper {
    height: auto;
}

.popover-heading,
.popup-heading {
    position: relative;
    display: flex;
    height: 4rem;
    justify-content: space-between;
    align-items: flex-start;
}

.popover-heading::after,
.popup-heading::after {
    content: "";
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    z-index: -1;
    bottom: 0;
}

.popup-heading::after {
    background: linear-gradient(45deg, var(--txtColDark), transparent);
}

.popover-heading::after {
    background: linear-gradient(45deg, var(--color-primary), transparent);
}

.popover-heading-title,
.popup-heading-title {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.popover-heading-title > h1,
.popup-heading-title > h1 {
    font-size: 2.5rem;
}

.popover-heading-title > span,
.popup-heading-title > span {
    font-size: 1.8rem;
    color: var(--txtColLight);
}

.btn-popup-close {
    width: 3rem;
    height: 3rem;
}

/*** main container ***/

/** general structure **/

.main-wrapper {
    height: calc(var(--screenHeight) - var(--navHeight));
}

.page-modal,
.search-wrapper {
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    padding: 5%;
    will-change: transform;
}

.page-modal {
    padding-top: 2rem;
}

.search-wrapper {
    height: 100%;
    transition: transform var(--pageShift) ease-in;
    padding-bottom: 0;
}

.search-container {
    position: relative;
    display: grid;
}

.main-search-bar {
    position: relative;
    width: 100%;
    height: 7rem;
    display: grid;
    place-items: center;
    grid-template-columns: auto 1fr auto;
}

.btn-reset-search {
    position: relative;
    width: 0;
    height: 5rem;
    pointer-events: none;
    overflow: hidden;
    filter: drop-shadow(1px 2px 2px black);
    transition: width 0.15s ease-in-out 0.15s;
}

.btn-reset-search.show {
    width: 6rem;
    pointer-events: all;
    margin-left: 2rem;
    transition: width 0.15s ease-out;
}

.btn-reset-search .icon {
    --height: 3px;
    --width: 3rem;
    display: block;
    width: var(--width);
    height: var(--height);
    background: var(--color-secondary);
    transform: translate(6rem, 0);
    transition: transform 0.25s ease-out;
}

.btn-reset-search.show .icon {
    transform: translate(1.5rem, 0);
    transition: none;
}

.btn-reset-search.similar .icon {
    background: var(--color-similar);
}

.btn-reset-search.connect .icon {
    background: var(--color-connect);
}

.btn-reset-search .icon::before,
.btn-reset-search .icon::after {
    content: "";
    display: inherit;
    position: absolute;
    width: inherit;
    height: inherit;
    background: inherit;
    transform: translate(0, 0);
    transition: transform ease-in-out 0.1s;
}

.btn-reset-search:active {
    filter: none;
}

.btn-reset-search:active .icon {
    background: var(--txtColLight);
}

.btn-reset-search .icon::before {
    top: 0;
    left: 0;
}
.btn-reset-search.show .icon::before {
    transform: translate(-1rem, -1rem);
}
.btn-reset-search.show .icon::before,
.btn-reset-search.show .icon::after {
    transition: transform 0.1s ease-out 0.15s;
}

.btn-reset-search.show .icon::after {
    bottom: 0;
    right: 0;
}
.btn-reset-search.show .icon::after {
    transform: translate(-1rem, 1rem);
}

.btn-reset-search:active .icon {
    stroke: var(--txtColLight);
    filter: drop-shadow(0px 0px 1px rgb(39, 39, 39));
}

.main-search-actions-wrapper,
.main-search-song {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-search-actions-wrapper {
    margin-right: 2rem;
    width: auto;
    cursor: pointer;
}

.main-search-actions-container {
    max-width: 3rem;
    min-width: 3rem;
    height: 3rem;
    margin-left: 1rem;
    position: relative;
    padding: 0 0.5em;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: none;
    transition: height 0.2s ease-in-out 0.2s, max-width 0.1s ease-in-out 0.3s;
}

.main-search-actions-container:active {
    box-shadow: inset 0 0 2px 1px #0000004d, inset 1px 1px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982;
}

.main-search-actions-container.shown {
    max-width: 50vw;
    margin-left: 0;
    height: 100%;
    background: #c1c1be1f;
    box-shadow: inset 0 0 2px 1px #0000004d, inset 1px 1px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982;
    transition: height 0.1s ease-in-out 0.1s, max-width 0.2s ease-in-out;
}

.main-search-actions-container .cross {
    --offset: 0.2rem;
    position: absolute;
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    background-color: var(--color-secondary);
    border-radius: 50%;
    box-shadow: 1px 1px 2px black;
    transition: background-color 0.2s;
}

.main-search-actions-container.shown .cross {
    background-color: rgb(68 67 67 / 31%);
    transition: background-color 0.2s ease-out 0.2s;
}

.main-search-actions-container .cross.left {
    left: var(--offset);
}

.main-search-actions-container .cross.right {
    right: var(--offset);
}

.main-search-actions-container .cross.top {
    top: var(--offset);
}

.main-search-actions-container .cross.bottom {
    bottom: var(--offset);
}

.main-search-actions {
    display: flex;
    height: 7rem;
    gap: 1rem;
    transform: translateY(100%);
    transition: transform 0.2s ease-in;
}

.main-search-actions-container.shown .main-search-actions {
    transform: translateY(0);
    transition: transform 0.2s ease-in 0.2s;
}

.tag-action,
.search-action {
    width: 5rem;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--color-secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(2px 3px 3px rgb(39, 39, 39));
}

.search-action .icon {
    width: 4rem;
    height: 100%;
    /* filter: drop-shadow(2px 3px 3px rgb(39, 39, 39)); */
    transition: color 0.05s ease-out;
}

.search-action .icon.small-size {
    width: 4rem;
}

.search-action .icon.medium-size {
    width: 5rem;
}

.search-action:active {
    color: var(--txtColLight);
    filter: drop-shadow(0px 0px 1px rgb(39, 39, 39));
}

.sort-results-list-alfa {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--txtColDark);
    transform: translate(-50%, -50%) rotate(calc(var(--corr) * -1deg));
    box-shadow: 0 3px 4px rgb(10 10 10), inset 0 -2px 5px rgb(0 0 0),
        inset 0 2px 2px rgb(255 255 255 / 50%), 0 0 0 2px #000,
        0 0 5px 1px #0c0c0c;

    background: var(--color-primary);
}

[for="sort_by_alfa"] {
    --height: 0.25rem;
    --margin: 0.15rem;
    --width: 1.8rem;
    position: relative;
    width: var(--width);
    height: var(--height);
    background: var(--color-secondary);
}

[for="sort_by_alfa"]:active {
    background: var(--txtColLight);
}

[for="sort_by_alfa"]::before,
[for="sort_by_alfa"]::after {
    content: "";
    position: absolute;
    display: block;
    left: 50%;
    height: 100%;
    transition: width 0.18s ease-in-out;
}

[for="sort_by_alfa"]::before {
    background: inherit;
    width: calc(var(--width) * 0.25);
    transform: translate(-50%, calc((var(--height) + var(--margin)) * -2));
}
[for="sort_by_alfa"]::after {
    width: calc(var(--width) * 1.5);
    background: inherit;
    transform: translate(-50%, calc((var(--height) + var(--margin)) * 2));
}

#sort_by_alfa:checked + [for="sort_by_alfa"]::before {
    width: calc(var(--width) * 1.5);
}

#sort_by_alfa:checked + [for="sort_by_alfa"]::after {
    width: calc(var(--width) * 0.25);
}

/** restults-list **/

.results-list {
    z-index: 1;
    font-size: 2.5rem;
    overflow: auto;
    display: grid;
    grid-auto-rows: min-content;
    gap: 0.8rem;
    padding-bottom: 4rem;
    scrollbar-width: none;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
    scroll-behavior: smooth;
}
.results-list::-webkit-scrollbar {
    display: none;
}

.results-details-wrapper {
    font-size: 1.6rem;
    color: var(--color-secondary);
    text-shadow: 2px 2px 3px #101010d8;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 1rem;
    margin-bottom: 0;
}

/** loader **/
/* search-loader is toggled programmatically in app.blade.php */

.loader {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.3rem;
    background: transparent;
    border-radius: 5rem;
    box-shadow: none;
    overflow: hidden;
    pointer-events: none;
    transition: box-shadow 0.15s ease-in-out, opacity 0s linear 0.5s;
}

.main-search-loader {
    left: 50%;
    width: calc(100% - 1rem);
    transform: translate(-50%, 7.3rem);
}

.modal-loader {
    top: 100%;
    transform: translate(0%, -50%);
}

.loader::after,
.loader::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateX(-50vw);
    transition: transform 0.5s cubic-bezier(0.21, -0.88, 0.91, 2);
    animation: leftRight 1.5s infinite ease-in;
}

.loader::before {
    width: 15rem;
    height: 200%;
    background: var(--color-primary);
    border-radius: 50%;
    filter: blur(20px);
}

.loader::after {
    width: 2rem;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.page-popup:has(.loading) .loader,
.page-popover:has(.loading) .loader,
.page-modal:has(.loading) .loader,
.loader.loading {
    opacity: 1;
    box-shadow: inset -1px -1px 0px 0px #9f9b9b63,
        inset 1px 1px 0px 0px #181717cf;
    transition: box-shadow 0.15s ease-in-out;
}

@keyframes leftRight {
    0% {
        transform: translate(-50%, -50%) translateX(-75vw);
    }
    50% {
        transform: translate(-50%, -50%) translateX(75vw);
    }
    100% {
        transform: translate(-50%, -50%) translateX(-75vw);
    }
}

/** filter breadcrumbs **/

.filter-breadcrumbs {
    display: inline-block;
}

.filter-breadcrumbs li,
.filter-breadcrumbs ul {
    display: inline-block;
}

.crumb-level-search {
    text-transform: uppercase;
    font-weight: bold;
}

.crumb-level:not(:last-child)::after,
.crumb-level-secondary .crumb:not(:last-child)::after {
    content: ">";
    padding-left: 0.2rem;
}

.crumb-bpm ul {
    display: flex;
}
.crumb-bpm li:first-child::after {
    content: "-";
    padding-left: 0.2rem;
}

/** select options **/

.select-options {
    overflow: hidden;
    max-height: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-secondary);
}

.select-options .select-buttons-wrapper {
    height: 5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
}

.select-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.select-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0rem 1.5rem 0rem;
}

.select-options.shown {
    max-height: 10rem;
}

.toggle-select-all {
    width: 4rem;
    height: 4rem;
    position: relative;
    overflow: hidden;
    display: flex;
}

.toggle-select-all::after {
    content: "";
    width: 74%;
    height: 74%;
    position: absolute;
    left: 50%;
    top: 50%;
    background: linear-gradient(
        45deg,
        transparent 47%,
        var(--color-secondary) 47%,
        var(--color-secondary) 53%,
        transparent 53%
    );
    filter: drop-shadow(0px 0px 1px black);
    transform: translate(-170%, -170%);
    transition: transform 0.05s ease-in-out;
}

.toggle-select-all.checked::after,
input:checked + .toggle-select-all::after {
    transform: translate(-50%, -50%);
    transition: transform 0.05s ease-in-out;
}

.select-actions .btn-song-action {
    padding: 0.5rem;
    transition: box-shadow 0.1s ease-in-out;
}

.select-actions .btn-song-action:disabled {
    color: red;
    box-shadow: inset 0 0 0px 1px #8583838c, inset 0 0 2px 2px #7e7d7d42;
}

/** search container **/

.select-options,
.bpm-options {
    margin-top: 0;
    border-radius: 0.5rem;
    background: #c1c1be1f;
    transition: all 0.2s ease-in-out 0.1s;
}

.select-options.shown,
.bpm-options.shown {
    margin-top: 1rem;
    transition: all 0.3s ease-in-out;
}

.bpm-filters,
.select-options {
    padding: 0 1rem;
    box-shadow: inset 0 0 0 1px #70706f85;
}

.bpm-options {
    overflow: hidden;
    max-height: 0;
    color: var(--color-secondary);
}
.bpm-options.shown {
    max-height: 26rem;
}

.bpm-filters {
    border-radius: inherit;
    transition: box-shadow 0.5s ease-in;
}

.bpm-filters.loading {
    box-shadow: inset 0 0 0 1px #f3980185;
}

.bpm-select {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.bpm-select-option {
    filter: drop-shadow(1px 2px 2px rgb(39, 39, 39));
}

.bpm-select-option.checked {
    border-bottom: 1px solid var(--txtColLight);
    text-shadow: 1px 1px 2px #10101087;
    color: var(--txtColLight);
}

.bpm-select-option:active {
    color: var(--txtColLight);
    filter: drop-shadow(0px 0px 1px rgb(39, 39, 39));
}

/** bpm range - dual range slider overrides **/

.slider-track-progress {
    background: var(--color-secondary);
    box-shadow: inset 0 0 0 1px #121212, inset 0 0 3px 2px #4e4d4d87,
        inset 0 0 10px 4px #af7a01eb;
}
.slider-thumb {
    background: var(--color-primary);
}

.dual-range-slider-wrapper {
    --sliderWidth: 100%;
    --indicatorOffset: -60%;
    display: grid;
    display: flex;
    grid-template-columns: auto 1fr;
    place-items: center;
    gap: 2rem;
    padding: 0;
    font-size: 1.6rem;
}

.dual-range-slider-wrapper.disabled {
    pointer-events: none;
}

.dual-range-slider-wrapper.disabled {
    color: rgb(116 115 115);
}

.dual-range-slider-wrapper.disabled .dual-range-slider,
.dual-range-slider-wrapper.disabled .bpm-select {
    pointer-events: none;
}

.dual-range-slider-wrapper.disabled .switch-button {
    pointer-events: all;
}

.dual-range-slider-wrapper.disabled .slider-thumb,
.dual-range-slider-wrapper.disabled .slider-track-progress {
    background: transparent;
    box-shadow: none;
}

.slider-track-background {
    border-radius: 1rem;
    background: var(--greyTransp);
    box-shadow: inset 0 0 5px 1px #0000004d, inset 2px 2px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982;
}

/** search container **/

.filter-count {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0.5rem 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--color-secondary);
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: inset 0 0 2px 1px #0000004d, inset 1px 1px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982;
}
.search-input-box {
    color: var(--txtColDark);
    height: 7rem;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    background: transparent;
    border-radius: 1em;
    box-shadow: inset 0 0 5px 1px #0000004d, inset 2px 2px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982;
}
.search-input-box:focus-within {
    background-color: var(--color-primary);
}

.text-input,
.search-input {
    width: 100%;
    background: transparent;
    color: var(--color-secondary);
    border: none;
    outline: none;
    padding-left: 1em;
    text-transform: lowercase;
}

.search-input {
    font-size: 1.5em;
}

.text-input {
    font-size: 1em;
    color: var(--txtColDark);
}

.search-input-box:focus-within .search-input {
    color: var(--txtColDark);
}

.search-input-box .placeholder {
    width: 3.5rem;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: var(--txtColLight);
    position: absolute;
    left: 1em;
    pointer-events: none;
}
.placeholder .icon {
    filter: drop-shadow(2px 2px 2px #020202cc);
}

.main-search-input:not(:placeholder-shown) + .placeholder,
.search-filter-input:not(:placeholder-shown) + .placeholder,
.search-input-box:focus-within .placeholder {
    display: none;
}

.search-filter-input::placeholder,
.main-search-input::placeholder {
    color: transparent;
}

.btn-clear-text,
.btn-add-new,
.btn-popup-close,
.btn-clear-search {
    color: currentColor;
    align-items: center;
    justify-content: flex-end;
    outline: none;
    text-shadow: 2px 2px 4px black;
    border: none;
    background: transparent;
}
.btn-clear-search {
    display: none;
    width: 5rem;
    height: 100%;
    padding-right: 1em;
}

.btn-popup-close .icon,
.btn-clear-search .icon {
    width: 3rem;
    height: 3rem;
    filter: drop-shadow(1px 1px 2px black);
    display: block;
}

.btn-popup-close:active .icon,
.btn-clear-search:active .icon {
    filter: drop-shadow(0px 0px 1px rgb(39, 39, 39));
}
.search-input-box:focus-within .btn-clear-search {
    display: flex;
}

.btn-popup-close:active,
.btn-clear-search:active {
    color: var(--txtColLight);
}

/**** results container ****/

/*** result item ***/
.hideable {
    display: none;
}
.result-list-item {
    pointer-events: none;
    position: relative;
    margin-bottom: 0.2rem;
    box-shadow: inset 0 0 5px 1px #20202094, inset 2px 2px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982;
    border-radius: 1em;
    overflow: hidden;
    height: var(--songHeight);
}

.song-connection-actions-selected {
    display: none;
    position: absolute;
    padding: 0 2rem;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(2 214 252 / 7%);
}

.result-list-item.connect-selected {
    box-shadow: inset 0 0 0 3px var(--color-connect);
    background: rgb(2 120 141 / 41%);
}

.results-list.connect .song-connection-actions-selected {
    display: block;
}

.song-connection-actions {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    width: 100%;
    height: 100%;
}

.song-connection-actions > button {
    width: 7rem;
    height: 7rem;
    background: var(--color-connect);
}

.song-connection-actions > button .icon {
    fill: rgb(2 120 141 / 94%);
    stroke-width: 0;
    filter: drop-shadow(1px 1px 0px #012e4157);
}

.song-connection-actions > button:active {
    background: #05ccee85;
    border: none;
}

.song-connection-actions > button:active .icon {
    fill: white;
}

.add-connections-remark {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    background: #03dbf729;
    box-shadow: inset 0 0 0 2px var(--color-connect);
    border-radius: 1em;
}

.add-connections-remark.has-text,
.add-connections-remark:focus-within {
    background: var(--color-connect);
}

.add-connections-remark.has-text:focus-within .btn-clear-text {
    opacity: 1;
}

.btn-clear-text {
    display: flex;
    opacity: 0;
    padding-right: 0.5em;
}

.btn-clear-text .icon {
    display: block;
    width: 2.5rem;
    filter: drop-shadow(1px 1px 2px black);
}

.btn-clear-text:active .icon {
    stroke: var(--txtColLight);
}

.results-list.connect .result-list-item {
    pointer-events: all;
}

.result-list-item.connect,
.result-list-item.similar {
    top: 0;
    z-index: 20;
    position: sticky;
    background: var(--txtColDark);
}

.result-list-item.similar {
    box-shadow: inset 0 0 5px 3px #f7037e, inset 2px 2px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982, 0 10px 5px #0e0e0e63;
}

.result-list-item.connect {
    box-shadow: inset 0 0 5px 3px var(--color-connect),
        inset 2px 2px 0 0px #2a292994, inset -1px -1px 0 0px #9b999982,
        0 10px 5px #0e0e0e63;
}

.result-list-item.connected .result-specs-front {
    background: linear-gradient(45deg, #016977f7 10%, #4f4d4d 10%);
}

.result-list-item.connect .result-specs-front,
.result-list-item.similar .result-specs-front {
    pointer-events: none;
}

.result-list-item.similarBpm.similarTags .result-specs-front {
    background: linear-gradient(45deg, #791446 10%, #4f4d4d 10%);
}
.result-list-item.similarBpm .spec-song-bpm {
    filter: drop-shadow(1px 1px 2px #020202);
    box-shadow: 0 0 0 1px var(--color-similar);
}

.result-list-item.similarTags .tags-snapshot .snapshot-badge {
    color: var(--color-similar);
}

.result-list-item.similarTags .tags-snapshot .icon {
    fill: var(--color-similar);
}

.result-list-item.connected .connections-snapshot .icon {
    fill: var(--color-connect);
}

.result-specs-wrapper {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: 1em;
    z-index: -1;
    pointer-events: all;
}

/** select result item **/
.result-item-select {
    background: #e7d9b12b;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: pointer;
    border-radius: inherit;
}
.result-item-select-checkbox:checked + .result-item-select-label {
    box-shadow: inset 0 0 0 5px var(--color-secondary);
}

.result-item-select-label {
    width: 100%;
    height: 100%;
    box-shadow: none;
    border-radius: inherit;
    touch-action: manipulation;
}

/** item **/

.result-specs-front,
.result-specs-back {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    display: flex;
    height: 100%;
}

.result-list-item:has(.open-left) .result-specs-back-right::after,
.result-list-item:has(.open-right) .result-specs-back-left::after {
    opacity: 1;
    pointer-events: all;
    transition: opacity 0s var(--songShift);
}

/** front **/
.result-specs-front {
    overflow: hidden;
    z-index: 1;
    height: 100%;
    display: grid;
    border-radius: inherit;
    grid-template-columns: 20% 65% 1fr;
    gap: 1rem;
    background: var(--greyTransp);
    transition: transform var(--songShift) cubic-bezier(0.29, 0.96, 0.93, 1.12),
        background-color 0.05s ease-out var(--songShift);
}

.result-item-select.similarBpm.similarTags:has(
        .open-left,
        .open-right,
        .moving
    ),
.result-specs-front:is(.open-left, .open-right, .moving) {
    background-color: #363535;
}

.result-specs-front.moving {
    transition: transform var(--songShift) cubic-bezier(0.29, 0.96, 0.93, 1.12);
}

.result-specs-front.open-left {
    transform: translate(50%);
}
.result-specs-front.open-right {
    transform: translate(-50%);
}

.result-specs-front.open-left,
.result-specs-front.open-right {
    transition: transform var(--songShift) cubic-bezier(0.29, 0.96, 0.93, 1.12);
}

.result-list-item:has(.moving) .result-specs-back-left,
.result-list-item:has(.moving) .result-specs-back-right {
    opacity: 1;
    transition: none;
}

.result-list-item:has(.open-left) .result-specs-back-left,
.result-list-item:has(.open-right) .result-specs-back-right {
    opacity: 1;
    transition: opacity 0s var(--songShift);
}

.result-specs-front-middle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/** left: numbers **/

.result-specs-front-left {
    display: grid;
    grid-template-columns: 3rem auto;
    margin-right: 0.5rem;
}

.result-specs-front-left .specs-main {
    place-self: center;
    width: 100%;
    height: 9rem;
    padding-top: 0.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--color-secondary);
}

.result-specs-front-left .specs-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 1rem;
    padding: 1rem 0;
}

/** right: attributes info **/

.result-specs-front-right {
    display: grid;
    grid-template-rows: repeat(auto-fill, 25%);
    padding: 0.8rem 0;
    margin-right: 2rem;
}

.snapshot {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    place-items: center;
    position: relative;
    border-radius: 0.5rem;
    padding: 0.2rem;
}

.snapshot .icon {
    stroke: none;
    width: 2.4rem;
    height: 2.4rem;
    fill: var(--txtColLight);
}

.snapshot-badge {
    font-size: 1rem;
    color: var(--txtColLight);
    justify-self: center;
}

.spec-album {
    color: var(--color-primary);
}

.spec-song {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: black;
    max-width: 100%;
}
.spec-album-track {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    font-weight: bold;
}

.spec-song-bpm {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    height: 3rem;
    color: var(--color-secondary);
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.753));
    width: 5rem;
    margin: 0 auto;
    border-radius: 2rem;
    padding-bottom: 0.2rem;
}

.spec-song-bpm.song {
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.result-specs-front-middle > span {
    /* text-align: center; */
}

.spec-song-index {
    font-weight: bold;
    color: rgb(46 46 46);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    text-shadow: -1px -1px 0px #767272cc;
}

.spec-song-title {
    font-weight: bold;
    font-size: 2rem;
}
.spec-song-artist {
    text-transform: uppercase;
}

.spec-song-collection {
    --color: var(--collectionColor, var(--color-primary));
    color: var(--color);
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 5px 0 #020202c9, inset 0 0 0px 1px var(--color);
}

.spec-song-collection::after {
    content: attr(data-letter);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.2rem;
}

/** back **/

.result-specs-back-left,
.result-specs-back-right {
    width: 50%;
    height: 100%;
    display: grid;
    align-items: center;
    position: relative;
    opacity: 0;
    padding: 0.5em;
    grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
    gap: 0.5em;
    transition: opacity 0s var(--songShift);
}

.result-specs-back-left::after,
.result-specs-back-right::after {
    content: "";
    display: block;
    opacity: 0;
    pointer-events: none;
    background: var(--color-primary);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1em;
    transition: none;
    box-shadow: inset 0 0 15px 7px #0000004d, inset 4px 4px 0 0px #2a292994,
        inset -4px -4px 0 0px #9b999982;
}

/* back left */

.select-actions .btn-song-action,
.result-specs-back-left .btn-song-action {
    font-size: 1.5rem;
    background: var(--color-primary);
    color: var(--txtColDark);
}

.select-actions .btn-song-action .icon,
.result-specs-back-left .btn-song-action .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    fill: currentColor;
    stroke: none;
}

/** page popups **/

.page-popup.bpm {
    position: relative;
}
.page-popup.bpm .popup-heading {
    position: absolute;
    right: 0;
}

.page-popup.bpm .popup-heading::after,
.page-popup.bpm .popup-heading-title {
    display: none;
}
.bpm-update {
    display: grid;
}
.bpm-update .song {
    position: absolute;
}
.numpad-display {
    display: grid;
    grid-auto-flow: row;
    padding: 0 1.5em;
    height: 5rem;
    margin: 5rem 0 4rem 0;
}
.display-digits {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.1em;
    width: 100%;
    height: 100%;
}

.numpad-display .alert-message {
    height: 2em;
    font-size: 1em;
    text-align: center;
}

.numpad-display.shake {
    animation: wiggle 0.1s ease-in-out;
    animation-iteration-count: 2;
}

@keyframes wiggle {
    0% {
        transform: translateX(0%);
    }
    33.33% {
        transform: translateX(1%);
    }
    66.66% {
        transform: translateX(-1%);
    }
    100% {
        transform: translateX(0%);
    }
}

.numpad-display .digit {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    font-weight: bold;
    width: 6rem;
    height: 6rem;
    background: var(--txtColDark);
    color: var(--color-primary);
}

.numpad-buttons {
    display: grid;
    place-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em 0;
    padding: 0 1.5em;
    padding: 0 1.5em 2rem 1.5rem;
}

.numpad-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--txtColDark);
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    user-select: none;
    cursor: pointer;
    touch-action: manipulation;
}
.numpad-btn > * {
    pointer-events: none;
}
.numpad-btn.number {
    box-shadow: var(--bShad-yellow);
    font-size: 4rem;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow 0s linear 0.15s;
}

.numpad-btn.action {
    background: transparent;
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
    transition: color 0s linear 0.15s;
}

.numpad-btn.action .icon {
    width: 5rem;
    height: 5rem;
}

.numpad-btn.number.active {
    box-shadow: var(--bShad-yellow-inset);
    transition: none;
}
.numpad-btn.action.active {
    color: white;
    transition: none;
}

.popover-content,
.popup-content {
    display: grid;
    padding: 1rem 0;
}

/** genres **/

.genres-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.genre-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.chip.genre,
.song.chip {
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1rem;
    padding-left: 2rem;
    height: 4rem;
    min-width: 7rem;
}

.chip.genre {
    position: relative;
}

.chip.genre.parent {
    color: var(--txtColDark);
    background: transparent;
    padding: 0;
    box-shadow: none;
    height: auto;
    flex-wrap: wrap;
}

.genre-chip-label {
    height: 4rem;
    padding-left: 2rem;
    padding-right: 1rem;
    gap: 1rem;
}

.genre-chip-label .btn-chip-action {
    padding: 0;
}

.genre-chip-label label {
    cursor: pointer;
}

.chip.genre.subgenre.song,
.chip.genre.parent.song .genre-chip-label,
.song.chip {
    color: var(--color-secondary);
    background: var(--txtColDark);
}

.chip.genre:active,
.song.chip:active {
    box-shadow: 0 0 0 1px rgb(247 246 245);
}

.chip.genre.parent:active {
    box-shadow: none;
}

.chip.genre.parent.song .genre-chip-label:active,
.chip.genre-chip-label:active {
    color: var(--txtColLight);
}

.chip.genre.parent.song .genre-chip-label:active .icon,
.chip.genre-chip-label:active .icon {
    stroke: var(--txtColLight);
}

.genre.chip .genre-name {
    font-size: 1.2rem;
}

.btn-chip-action {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 100%;
    padding-top: 0.4rem;
}

.btn-chip-action .icon {
    stroke: var(--color-secondary);
}

.btn-chip-action:active .icon,
.song.chip:active .icon {
    stroke: var(--txtColLight);
}

.genre.chip .icon {
    stroke: var(--txtColDark);
}

.genre.chip.song .icon {
    stroke: var(--color-secondary);
}

.subgenres-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 1rem;
}

.genre.subgenre.chip {
    justify-content: center;
    color: var(--txtColDark);
    height: 2.5rem;
    font-size: 1.3rem;
}

.genre.subgenre .btn-chip-action {
    width: 1.2rem;
    padding-top: 0.2rem;
}

.genre.subgenre .icon {
    stroke: var(--txtColDark);
}

.genre.subgenre.chip:active {
    color: var(--txtColDark);
    background: var(--color-secondary);
}

.genre.song.subgenre.chip:active {
    color: var(--txtColLight);
    background: var(--txtColDark);
}

.genre.song.subgenre.chip:active .icon {
    stroke: var(--txtColLight);
}

.spec-song-playlists,
.spec-song-tags,
.spec-song-genres {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/** tags **/

.genres-list,
.playlists-list,
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    overflow: auto;
    max-height: 78vw;
    padding: 1rem 1rem 1rem 0;
}

.playlist.chip,
.tag.chip {
    position: relative;
    background: transparent;
    color: var(--txtColDark);
    padding: 0 2rem;
    height: 4rem;
    min-width: 7rem;
    order: 2;
}

.tag.chip.matched:not(.song.tag.chip) {
    order: 1;
    font-weight: bold;
    box-shadow: inset 0 0 0 2px var(--txtColDark);
}

.tags-similar-primary-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.tag-update-similar {
    display: grid;
    grid-template-rows: 1rem 5rem;
    align-self: flex-end;
    justify-items: center;
    width: max-content;
    gap: 0.5rem;
}

.btn-similar-update .icon {
    width: 3rem;
    height: 3rem;
}

.similar-dropdown-trigger .icon {
    width: 2rem;
    height: 2rem;
}

.btn-similar-update,
.similar-dropdown-trigger {
    display: flex;
    filter: drop-shadow(1px 1px 1px #565555);
}

.btn-similar-update:active,
.similar-dropdown-trigger:active {
    filter: none;
}

.similar-dropdown-trigger:active {
    color: var(--txtColLight);
}

.btn-similar-update:active .icon {
    fill: var(--txtColDark);
    stroke-width: 15px;
    stroke: var(--color-secondary);
}

.similar-list {
    display: grid;
    min-width: 60vw;
    pointer-events: none;
    font-size: 2rem;
    color: var(--txtColLight);
    padding: 2rem;
    border: 2px solid var(--color-primary);
    border-radius: 1em;
    margin: 0 4rem;
}

.similar-dropdown-content {
    position: absolute;
    display: grid;
    place-items: center;
    top: calc(100% + 1rem);
    opacity: 0;
    left: 50%;
    z-index: -1;
    width: max-content;
    overflow: hidden;
    border-radius: 1em;
    transition: opacity 0.2s ease-in-out;
    transform: translate(-50%);
    background: linear-gradient(45deg, #545333, var(--txtColDark));
    box-shadow: inset 1px -1px 0 #020202bf, inset -1px 1px 0 #918e8e,
        -4px 4px 12px 0px #04040436, -4px 4px 8px 0px #605e5e3b,
        -4px 4px 16px 0px #503f016b;
}

.similar-dropdown-container {
    display: grid;
    padding-bottom: 4rem;
}

.tags-similar-primary-actions,
.tags-similar-secondary-actions {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    height: var(--actionsHeight);
    color: var(--color-secondary);
    padding: 1rem 2rem;
}
.tags-similar-title {
    font-size: 1rem;
    margin: 0;
}
.tags-similar-primary-actions {
    flex-direction: row;
    align-items: center;
    width: max-content;
    height: 4rem;
    padding: 0 2rem;
    border-radius: 3rem;
    gap: 2rem;
    box-shadow: inset -2px -2px 2px 0px #3a393980,
        inset 2px 2px 10px 0px #ffc605b0, -1px -1px 0px 1px #ffd40085,
        5px 5px 15px 0px #f7cd008c;
}

.tags-similar-secondary-actions {
    justify-content: space-between;
}

.similar-dropdown-content .toggle-select-all {
    display: none;
}

.similar-dropdown-content.open .btn-similar-update,
.similar-dropdown-content.open .toggle-select-all {
    display: block;
}

.btn-similar-update {
    position: relative;
}

.btn-similar-update::after {
    content: attr(data-checked);
    font-size: 0.6rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    top: 0.3rem;
    right: 0.05rem;
    color: var(--txtColLight);
    border-radius: 50%;
    background: var(--color-primary);
    filter: drop-shadow(-1px 2px 1px #0808081a);
}
.btn-similar-update .icon {
    fill: var(--color-secondary);
}

.btn-similar-update:disabled .icon {
    fill: none;
    stroke: var(--txtColDark);
    stroke-width: 5;
}

.similar-dropdown-content .toggle-select-all {
    right: 0;
}

.similar-dropdown-content .toggle-select-all:active {
    color: var(--txtColLight);
    filter: drop-shadow(0px 0px 1px rgb(39, 39, 39));
}

.similar-dropdown-content .toggle-select-all,
.similar-dropdown-content .btn-popup-close {
    color: var(--color-secondary);
}

.similar-dropdown-content .btn-popup-close:active {
    color: var(--txtColLight);
}

.similar-dropdown-content.open {
    opacity: 1;
    z-index: 1;
}

.similar-list.action-delete,
.similar-list.action-add {
    pointer-events: all;
}

.similar-list-item {
    display: flex;
    align-items: center;
    height: var(--itemHeight);
    gap: 0.5rem;
}

.similar-list-item::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: block;
    background: transparent;
}

.similar-list-item.checked::before {
    background: currentColor;
}

.similar-list-item.checked {
    color: var(--color-secondary);
}

.similar-list-item .snapshot-badge {
    /* font-size: 1.3rem; */
}

.subgenre.chip::after,
.playlist.chip:after,
.tag.chip:after {
    --color: var(--chipColor, #f5f3f34a);
    content: "";
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    top: 50%;
    left: 0.6rem;
    border-radius: 50%;
    background: var(--color);
    transform: translate(0, -50%);
    box-shadow: inset -1px -1px 2px #000000b0, inset 1px 1px 1px #f1efef94;
}

.tag.chip:active,
.playlist.chip:active {
    color: var(--txtColDark);
    background: var(--color-secondary);
}

.song.tag.chip,
.song.playlist.chip {
    background: var(--txtColDark);
    color: var(--color-secondary);
    order: 0;
}

.song.tag.chip:active,
.song.playlist.chip:active {
    color: var(--txtColLight);
    box-shadow: 0 0 0 1px rgb(247 246 245);
}

.playlist-badge {
    padding-left: 0.8rem;
    font-size: 1.2rem;
    padding-top: 0.6rem;
}

[name="selectPlaylist"]:checked + label {
    background: var(--txtColDark);
    color: var(--color-secondary);
}

.action-btn.btn-manage-playlists {
    padding: 0;
    border: none;
}

.tag-actions-container {
    position: relative;
    display: grid;
    grid-template-columns: 60% 1fr;
    gap: 2rem;
    align-items: center;
}

.add-new-form {
    display: flex;
    gap: 2rem;
    align-items: center;
    overflow: hidden;
    padding-right: 2rem;
    border-radius: 3rem;
    height: 4.5rem;
    margin: 2rem 0 1rem 0;
    box-shadow: inset 0 0 5px 1px #0000004d, inset 2px 2px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982;
}

.add-new-form button {
    display: none;
    width: 5rem;
    height: 5rem;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: none;
    filter: drop-shadow(1px 1px 2px black);
}

.add-new-form:focus-within {
    background: var(--txtColDark);
}

.add-new-form:focus-within .text-input {
    color: var(--color-secondary);
}

.add-new-form:focus-within button {
    display: block;
}

.add-new-form button:active .icon {
    stroke: var(--txtColLight);
}

.add-new-form button .icon {
    stroke: var(--color-secondary);
}

/* back right */

.select-actions .btn-song-action,
.result-specs-back .btn-song-action {
    aspect-ratio: 1;
}

/*** bottom nav ***/

.bottom-nav {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 4rem;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    background: var(--sidebarBg);
    height: var(--navHeight);
    width: 100%;
    z-index: 1;
    box-shadow: 0px -18px 23px #5c5e5e85;
    transform: translateY(0%);
    transition: transform var(--navShift) ease-in var(--modalClose);
    will-change: transform;
}

.bottom-nav .nav-item {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.bottom-nav .nav-item.main {
    height: 16rem;
    width: 16rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: inherit;
    border-radius: 50%;
}

.bottom-nav .nav-item.main::before {
    content: "";
    background: inherit;
    width: 18rem;
    height: 18rem;
    position: absolute;
    z-index: -1;
    background: transparent;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    box-shadow: 0px -18px 23px #5c5e5e85;
    transform: translate(-50%, -50%);
}

.nav-item:active .icon {
    fill: var(--txtColDark);
}

.bottom-nav .btn-bottom-nav {
    height: 60%;
    margin: 0;
    padding: 0;
    border: none;
}

.bottom-nav-actions {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease-in;
}

.nav-item.main label {
    width: 11rem;
}

.bottom-nav-actions.show {
    transform: translate(-50%, -300%);
}

.btn-create-song {
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 0 1px 0px #858282, 0 2px 7px 1px #040404;
}

/*** back to top ***/
#btn-back-to-top {
    position: absolute;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--txtColDark);
    right: 7rem;
    bottom: 1rem;
    width: 6rem;
    height: 6rem;
    padding: 1rem;
    border-radius: 50%;
    transform: translate(0rem, -1rem);
    filter: drop-shadow(2px 4px 6px black);
}

#btn-back-to-top:active {
    filter: none;
}

#btn-back-to-top:active .icon {
    stroke: var(--txtColLight);
}

#btn-back-to-top .icon {
    stroke: var(--accentBorder);
}

/*** notifications ***/

.alert-message {
    font-size: 0.8em;
    color: #f52424;
}

.success-message {
    font-size: 0.8em;
    color: limegreen;
}

#notification-modal {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    width: max-content;
    max-width: 70%;
    height: 4rem;
    background: var(--color-primary);
    padding: 0.2rem 1rem;
    border-bottom-left-radius: 1rem;
    box-shadow: 0px 0px 3px 1px #080808b8, -5px 5px 2px 1px #2a29294f;
    transform: translateX(200%);
    transition: transform var(--modalOpen) cubic-bezier(0.55, -0.52, 0.91, 0.84);
}

.notify-user.icon {
    fill: var(--txtColDark);
    width: 3rem;
    height: 3rem;
    stroke: none;
    filter: drop-shadow(1px 1px 2px rgb(39, 39, 39));
}

.notify-user.icon.success {
    fill: limegreen;
}

.notify-user.icon.error,
.notify-user.icon.alert {
    fill: rgb(209, 41, 12);
}

.notify-user.icon.info {
    fill: deepskyblue;
}

#notification-modal-message {
    font-size: 1.5rem;
    color: var(--txtColDark);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#notification-modal.active {
    transform: translateX(0%);
    transition: transform 0.5s cubic-bezier(0.35, 0.08, 0.61, 1.62);
}

/** playlist manager **/

.playlist-manager {
    overflow: hidden;
}

.tabs-nav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.playlist-header {
    height: 3rem;
}

.playlist-tabs {
    justify-content: center;
    margin-top: 2rem;
}

.tab {
    font-size: 2.5rem;
    position: relative;
}

.tab .tab-filter-indicator {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--color-secondary);
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: inset 0 0 2px 1px #0000004d, inset 1px 1px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982;
    position: absolute;
    left: 100%;
    background: var(--txtColDark);
    top: 50%;
    transform: translate(-80%, 50%);
}

.tab-content {
    height: 85%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tab-content-filters {
    display: grid;
    grid-template-columns: 1fr auto;
    margin: 1.5rem 1rem;
    align-items: center;
    padding: 0 1rem;
    border: 1px solid rgb(139 138 138 / 29%);
    border-radius: 1rem;
}

.tab-content-filters .btn-chip-action {
    padding: 0;
    width: 2.2rem;
    height: 3rem;
}

.tab-content-filters > .tab-content-filter-list {
    font-size: 1.6rem;
    color: var(--color-secondary);
    text-shadow: 2px 2px 3px #101010d8;
    display: flex;
    gap: 1rem;
}

.tab-content .results-list {
    max-height: 100%;
}

.tab-label {
    background: var(--txtColDark);
    border-radius: 3rem;
    padding: 0.5rem 2rem;
}

.tab-radio:checked + .tab-label {
    color: var(--txtColDark);
    background: var(--color-secondary);
}

.loading .tab-filter-label {
    background: rgb(2, 2, 2);
    text-shadow: none;
    opacity: 0.2;
    pointer-events: none;
    /** commented */
}

.tab-filter-label {
    font-weight: bold;
    padding: 0 2rem;
    text-align: center;
    white-space: break-spaces;
    text-transform: lowercase;
    text-shadow: 0 0 1px black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 15rem;
    width: 15rem;
    cursor: pointer;
    border-radius: 2rem;
    background: var(--greyTransp);
    box-shadow: inset 0 0 5px 1px #6a68684d, inset 2px 2px 0 0px #2a292994,
        inset 1px 1px 3px 0px #060606;
}

.tab-count-list {
    background: #f7f7f408;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    place-items: center;
    overflow: auto;
    gap: 2rem;
    padding: 2rem;
    border-radius: 3rem;
    scroll-behavior: smooth;
}

.tab-count-list:has(.empty-state) {
    display: block;
}

.empty-state {
    color: var(--color-secondary);
}

.tab-count-list-item {
    order: 1;
}

.tab-count-list-item:has(.tab-filter-input:checked) {
    order: 0;
}

.tab-count-list.tab-bpm:has(:only-child) .tab-filter-label,
.tab-count-list-item:has(.tab-filter-input:checked) .tab-filter-label {
    background: var(--color-secondary);
    opacity: 1;
    text-shadow: none;
}

.tab-count-list.tab-bpm:has(:only-child) .tab-filter-label-name,
.tab-count-list-item:has(.tab-filter-input:checked) .tab-filter-label-name {
    color: var(--txtColDark);
}

.tab-filter-label:active {
    text-shadow: none;
    box-shadow: inset 0 0 5px 2px #0000004d, inset 4px 4px 0 0px #2a292994,
        inset -2px -2px 0 0px #9b999982;
}

.tab-filter-label:active > span {
    left: 2px;
    color: var(--greyTransp);
    text-shadow: 0 0 1px #efecec33;
}

.tab-filter-label-name {
    position: relative;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 2.4rem;
    text-align: center;
    white-space: break-spaces;
    word-break: break-word;
    text-transform: lowercase;
}

.tab-filter-label-name.text-sm {
    font-size: 2rem;
}

.tab-filter-label-count {
    position: relative;
    font-size: 2rem;
}

/* edit song */

.page-modal-content .action-btn {
    width: 3rem;
    height: 3rem;
    display: flex;
    border-radius: 50%;
    padding: 0.2em;
}

.page-modal-content .btn-song-action.delete {
    width: 4rem;
    height: 4rem;
}

.register-form,
.login-form,
.song-edit-form {
    display: grid;
    gap: 0.5em;
    margin-right: 1rem;
}

.form-group,
.register-form .form-field,
.login-form .form-field,
.song-edit-form .form-field {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.register-form .form-field,
.login-form .form-field,
.song-edit-form .form-field {
    height: 2.3em;
}

.login-form .action-btn,
.song-edit-form .action-btn {
    margin: 1em 0;
    border-radius: 1.5rem;
    width: 6rem;
    height: 6rem;
    place-self: flex-end;
}

.connection-edit-form .action-btn .icon,
.login-form .action-btn .icon,
.song-edit-form .action-btn .icon {
    fill: currentColor;
    stroke-width: 0;
}

.connected-list {
    display: grid;
    gap: 0.5rem;
}

.connected-list-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0 1rem;
    border-left: 2px solid var(--color-connect);
}

.connection-info-song,
.connected-list-item-song {
    display: grid;
    padding-left: 1rem;
}

.connection-info-song-artist,
.connected-list-item-song-artist {
    color: var(--color-primary);
}

.connection-info-song-title,
.connected-list-item-song-title {
    font-size: 0.8em;
}

.register-form .form-label,
.page-modal-content .form-label,
.login-form .form-label,
.song-edit-form .form-label {
    margin: 0;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.register-form .text-input,
.login-form .text-input,
.song-edit-form .text-input {
    height: 100%;
    font-size: 1em;
    padding-left: 1em;
    background: var(--txtColDark);
    color: var(--color-secondary);
    border-radius: 3rem;
    text-transform: unset;
    box-shadow: inset 0 0 5px 1px #0000004d, inset 2px 2px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982;
}

.form-text-field {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-secondary);
    text-transform: lowercase;
    padding-left: 1rem;
}

.song-edit-form .text-input[disabled] {
    background: transparent;
    box-shadow: inset 0 0 0 1px #413f3f;
}

/* create album */
.create-album-wrapper {
    display: flex;
    min-height: 0;
    overflow: hidden;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
}

.create-album-wrapper .add-new-form {
    margin: 0;
    position: relative;
    overflow: visible;
    height: 5rem;
}

.collection-toggle {
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -4rem;
    transform: rotate(0deg);
    transition: all 0.15s ease-out;
}

.collection-toggle:active {
    color: white;
}

.collection-toggle.open {
    transform: rotate(90deg);
}

.create-album-wrapper .alert-message,
.create-album-wrapper .success-message {
    font-size: 0.7em;
    height: 2rem;
    margin-bottom: 1rem;
}

.album-table .alert-message,
.album-table .success-message {
    margin: 0;
    left: 10%;
    justify-self: flex-start;
    position: relative;
}

.create-album-main-actions {
    display: grid;
    place-items: center;
    width: 80vw;
    padding-bottom: 1rem;
    padding-top: 2rem;
    position: absolute;
    bottom: 7rem;
    border-top: 1px solid var(--txtColLight);
}

.create-album-main-actions button[type="submit"]:active {
    transition: none;
    box-shadow: var(--bShad-yellow-inset);
}

.create-album-main-actions button[type="submit"]:active .icon {
    fill: var(--txtColLight);
    transform: translate(2px, 2px);
    transition: none;
}

.create-album-main-actions button[type="submit"] {
    background: var(--color-primary);
    color: var(--txtColDark);
    padding: 1rem;
    box-shadow: inset -2px -2px 2px 0px #3a3939a1,
        inset 2px 2px 10px 0px #ffc605b0, -1px -1px 0px 1px #ffd400,
        5px 5px 15px 0px #060606a3;
    transition: all 0.15s ease-in-out;
    border-radius: 50%;
}

.create-album-main-actions button[type="submit"] .icon {
    position: relative;
    width: 6rem;
    height: 6rem;
    fill: currentColor;
    transform: translate(0, 0);
    transition: all 0.15s ease-in-out;
}

.create-album-main-actions button[type="submit"][disabled],
.create-album-main-actions.btn-disabled button[type="submit"] {
    pointer-events: none;
    background: var(--txtColLight);
    box-shadow: inset 1px 1px 0px 0px #bfbebe82, inset 0 0 15px 1px #0c0c0c87,
        inset 1px 1px 2px 1px #5a585894, 1px 1px 1px 1px #c1bdbd85;
    transition: none;
}

.create-album-main-actions.btn-disabled button[type="submit"] .icon {
    transform: translate(2px, 2px);
    transition: none;
}

.select-actions.collections {
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    height: 0;
    overflow: hidden;
    transition: height 0.15s ease-out;
}

.select-actions.collections.open {
    height: 6rem;
}

.btn-song-action.collection {
    border-radius: 1rem;
    background: transparent;
    color: var(--txtColLight);
    font-size: 2.2rem;
    padding: 0.2rem 1.2rem;
    padding-bottom: 0.6rem;
    border: none;
    aspect-ratio: auto;
}

.btn-song-action.collection:active {
    background: var(--color-primary);
    color: var(--txtColDark);
}

.album-select,
.collection-select {
    width: 80vw;
    display: grid;
}

.add-new-form.playlist,
.add-new-form.album,
.add-new-form.collection {
    width: 60%;
}

.add-new-form.album .text-input,
.add-new-form.collection .text-input {
    color: var(--color-secondary);
}

.album-table {
    --btnWidth: 3.5rem;
    display: grid;
    place-items: center;
    width: 100vw;
    position: relative;
    min-height: 0;
    touch-action: manipulation;
    margin-bottom: 15rem;
}

.table-headers,
.table-row {
    display: grid;
    grid-template-columns: 12% 1fr 1fr 10%;
    gap: 1rem;
}

.table-headers {
    width: 85vw;
    padding: 0 2.5vw;
    box-shadow: inset 0 0 2px 1px var(--txtColLight);
    border-radius: 10px;
}

.table-body-wrapper {
    --rowHeight: 3.2rem;
    --gap: 1rem;
    width: 100%;
    position: relative;
    overflow: auto;
    padding-top: var(--gap);
    height: 100%;
}

.table-body {
    position: relative;
    opacity: 1;
    width: 80vw;
    left: 10vw;
    transition: opacity 0.2s ease-out;
}

.table-row {
    height: var(--rowHeight);
    font-size: 2.2rem;
}

.row-actions {
    --actionsWidth: 7.5vw;
    display: flex;
    justify-content: space-between;
    margin-top: var(--gap);
    opacity: 0;
    pointer-events: none;
    height: var(--rowHeight);
    width: 85vw;
    left: var(--actionsWidth);
    position: absolute;
    z-index: -1;
    top: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 2px 1px var(--color-primary);
    transform: translateY(calc(var(--rowHeight) * var(--rowIndex)));
    transition: opacity 0s 0.3s, transform 0s 0.5s;
}

.row-actions.active {
    opacity: 1;
    pointer-events: all;
    z-index: 1;
    transition: opacity 0.15s ease-in-out;
}

.row-actions-left,
.row-actions-right {
    position: absolute;
    top: 50%;
    height: 6rem;
    width: var(--actionsWidth);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(-50%);
}

.row-actions .icon {
    width: 5rem;
    height: 5rem;
    padding: 0.1rem;
    filter: drop-shadow(2px 3px 3px #000000a6);
}

.row-actions-left .icon {
    color: limegreen;
}

.row-actions .icon:hover,
.row-actions .icon:active {
    color: rgb(251 249 249 / 27%);
    filter: none;
}

.row-actions-left .icon:nth-of-type(2) {
    color: var(--color-secondary);
    position: absolute;
    stroke-width: 3;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    top: 50%;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.row-actions-right .icon {
    color: red;
    padding: 1rem;
    padding-left: 0;
}

.row-actions-left {
    left: calc(var(--actionsWidth) * -1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.row-actions-right {
    right: calc(var(--actionsWidth) * -1);
}

.table-header {
    position: relative;
    color: var(--color-primary);
    font-size: 1.8rem;
    text-transform: uppercase;
    padding: 0.3rem;
}

.album-table thead:after {
    content: "";
    display: block;
    height: 2rem;
}

.table-header-options {
    text-transform: lowercase;
    position: absolute;
    z-index: 1;
    color: var(--txtColLight);
    background: var(--txtColDark);
    left: 0;
    width: auto;
    top: 100%;
    border-radius: 0.5rem;
    display: grid;
    z-index: 1;
    padding: 0.2rem;
    border: 1px solid var(--txtColDark);
    gap: 2px;
}

.table-header-option {
    padding: 0.2rem 2rem;
    background: #2a2929;
}

.table-header-option:active {
    color: var(--color-primary);
}

.table-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-header-option:active {
    color: var(--color-primary);
}

.row-input {
    color: var(--txtColLight);
    width: 100%;
    border: none;
    border-bottom: 1px solid transparent;
    outline: none;
    background: #00000005;
    text-overflow: ellipsis;
    transition: all 0s 0.2s, padding 0.1s ease-in-out 0.2s;
}

.row-input.error {
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px red, inset 0 0 5px 1px #0000007d;
}

.row-input:focus-visible {
    padding-left: 0.5rem;
    border-bottom: 1px solid var(--color-secondary);
    color: var(--color-secondary);
}

.input-loading .table-body {
    opacity: 0.3;
    pointer-events: none;
}

.upload-wrapper {
    width: 100%;
    position: relative;
    padding: 0.5rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
}

.upload-wrapper::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 33%;
    right: 0;
    border-radius: 1em;
    transition: all 0.15s ease-in 0.3s;
}

.upload-wrapper.open::after {
    width: 100%;
    background: #c1c1be1f;
    box-shadow: inset 0 0 2px 1px #0000004d, inset 1px 1px 0 0px #2a292994,
        inset -1px -1px 0 0px #9b999982;
    transition: all 0.15s ease-in;
}

.btn-upload-action:not(:last-child) {
    pointer-events: none;
    opacity: 0;
    transition: all 0.15s ease-in;
}

.upload-wrapper.open .btn-upload-action:not(:last-child) {
    opacity: 1;
    pointer-events: all;
    transition: all 0.15s ease-in 0.3s;
}

.btn-amount-reset,
.btn-upload-action {
    display: flex;
    filter: drop-shadow(2px 3px 3px rgb(39, 39, 39));
    color: var(--color-secondary);
    width: max-content;
}

.rows-select-wrapper .icon {
    width: var(--btnWidth);
    height: var(--btnWidth);
    fill: currentColor;
}

.btn-amount-reset:active,
.upload-wrapper.open .btn-upload-action:active {
    transition: none;
    color: var(--txtColLight);
    filter: drop-shadow(0px px 0px 1px rgb(39, 39, 39));
}

.rows-select-wrapper {
    display: grid;
    align-items: center;
    margin-bottom: 1rem;
    grid-template-columns: repeat(3, 1fr);
    width: 85vw;
}

.row-amount-selector {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 1rem;
}

.row-amount-selector .scroll-action {
    color: var(--txtColLight);
    display: grid;
    width: 2rem;
    height: 100%;
    transition: color 0.15s ease-out;
}

.scroll-action .icon {
    color: currentColor;
    fill: none;
    width: 2rem;
    height: 100%;
}

.row-amount-selector .scroll-action:active {
    color: white;
}

.row-amount-numbers {
    --height: 4rem;
    --width: 6rem;
    position: relative;
    width: var(--width);
    overflow: auto;
    display: flex;
    background: var(--txtColDark);
    height: var(--height);
    scroll-behavior: smooth;
    user-select: none;
    scroll-snap-type: x mandatory;
    border: 1px solid var(--color-primary);
    border-radius: 1rem;
    box-shadow: inset 0 0 3px 0px #323131c4, inset 2px 2px 10px 3px #1c1c1cb0;
}

.row-amount-numbers::-webkit-scrollbar {
    display: none;
}

.row-amount-numbers::after {
    /* content: ""; */
    position: fixed;
    pointer-events: none;
    display: block;
    width: 100%;
    height: 100%;
    left: 0;
    height: var(--height);
    background: linear-gradient(
        to left,
        black 40%,
        transparent 40%,
        transparent 60%,
        black 60%
    );
}

.row-amount-number {
    display: grid;
    place-items: center;
    width: var(--width);
    height: 100%;
    font-size: 1.8rem;
    color: var(--color-secondary);
    text-shadow: 2px 2px 3px #101010d8;
    flex-shrink: 0;
    scroll-snap-align: center;
}

/** connected- songs */

.song-connections-detail {
    min-height: 40rem;
}

.song-connections-detail.loading {
    pointer-events: none;
    opacity: 0.5;
}

.song-connected-indicators {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.song-connected-indicators.before {
    left: 0;
}

.song-connected-indicators.after {
    right: 0;
}

.song-connected-indicator {
    background: var(--color-connect);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

/** migrate page **/

.migrations-table {
    display: grid;
    overflow: hidden;
}

.migrations-table .table-headers,
.migrations-table .table-row {
    width: 100%;
    grid-template-columns: 5% 78% 12%;
    padding: 0 2.5vw;
}

.migrations-table .table-body {
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding-bottom: 1rem;
    scrollbar-width: none;
}

.table-row .cell-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-row .cell-overflow {
    overflow: auto;
    scrollbar-width: none;
}

.migrations-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem;
}

.migrations-actions button {
    border-radius: 1rem;
    padding: 0.8rem 1.5rem;
}

.migrations-actions button.danger {
    background: var(--color-secondary);
}

.migrations-actions button[disabled] {
    background: var(--txtColLight);
}

.migrations-label.active,
input:checked + .migrations-label {
    color: var(--txtColDark);
    background: var(--color-secondary);
}

.migrations-label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    padding: 0.5rem 2rem;
    border-radius: 2rem;
    background: var(--greyTransp);
}

/** connections tree **/

.song-connections-container {
    --height: 13rem;
    --pad: 2rem;
    --gap: 2rem;
    --width: 1rem;
    --offset: 2.5rem;
    padding: var(--pad);
    display: grid;
}

.song-connections-tree {
    display: flex;
    flex-direction: column;
    position: relative;
}

.song-connections-tree.before {
    flex-direction: column-reverse;
}

.song-connections-grid,
.song-info-container {
    position: relative;
    height: var(--height);
    border-radius: 1.5rem;
    box-shadow: var(--bShad-yellow);
    transition: box-shadow 0.2s ease-out;
}

.song-connections-grid {
    overflow: hidden;
}

.song-connections-grid.moving,
.song-connections-grid.touching {
    box-shadow: var(--bShad-yellow-inset);
}

.song-connections-grid.moving .song-connection,
.song-connections-grid.touching .song-connection {
    pointer-events: none;
}

.song-connection {
    --gap: 2rem;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transition: none;
}

.song-info-container,
.song-connection {
    display: grid;
    padding: 2rem;
}

.song-connections-tree::before,
.song-info-container::before {
    content: "";
    position: absolute;
    display: block;
    height: var(--width);
    width: var(--width);
    left: calc(var(--offset) * -1);
    top: 50%;
    background: transparent;
    border-radius: 50%;
    transform: translate(0%, -50%);
    box-shadow: 0 0 0 3px var(--color-connect);
}

.song-info-container::before {
    top: 50%;
    background: var(--color-connect);
}

.song-connections-tree::before {
    background: var(--color-primary);
}

.song-connections-tree.after::before {
    top: calc(50% + calc(var(--gap) / 2));
}

.song-connections-tree.before::before {
    top: calc(50% - calc(var(--gap) / 2));
}

.song-connections-tree::after {
    content: "";
    display: block;
    width: 0.1rem;
    top: 0;
    position: absolute;
    left: calc(var(--offset) * -1 + calc(var(--width) / 2));
    background: var(--color-connect);
    height: calc(var(--height) + var(--gap) - var(--width));
}

.song-connections-tree.before::after {
    transform: translate(-50%, calc((var(--height) + var(--width)) / 2));
}

.song-connections-tree.after::after {
    transform: translate(-50%, calc((var(--height) - var(--width)) / -2));
}

.song-connection.transition {
    background: red;
    transition: transform calc(var(--transition) * 1ms) ease-in;
}

.moving .song-connection {
    transition: transform calc(var(--transition) * 1ms) ease-in;
}

.song-connection.connection-up {
    transform: translate(0%, calc((100% + var(--gap)) * -1));
}

.song-connection.connection-down {
    transform: translate(0%, calc(100% + var(--gap)));
}

.song-connection.connection-left {
    transform: translate(calc((100% + var(--gap)) * -1), 0%);
}

.song-connection.connection-right {
    transform: translate(calc(100% + var(--gap)), 0%);
}

.song-connection {
    transform: translate(0%, 0%);
}

.song-connections-buttons {
    display: flex;
    gap: 2rem;
}
.connection-btn {
    padding: 1rem;
    font-size: 2rem;
}

.info-badge {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    left: 50%;
    font-size: 1.2rem;
}

.info-badge.tree-before {
    top: 0;
    transform: translate(-50%, 0);
}

.info-badge.tree-after {
    bottom: 0;
    transform: translate(-50%, 0);
}

.tree-after > .icon,
.tree-before > .icon {
    width: 2rem;
    height: 2rem;
    stroke: var(--color-connect);
}

.tree-after > .icon {
    transform: rotate(180deg);
}

[data-before][data-parent] .info-badge.tree-after,
[data-after][data-parent] .info-badge.tree-before,
[data-before]:not([data-before="0"]) .info-badge.tree-before,
[data-after]:not([data-after="0"]) .info-badge.tree-after {
    display: flex;
}

.connection-indicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    height: var(--gap);
    transition: all 0.1s;
}

.connection-indicators .song-connected-indicator:not(.selected) {
    height: 0.2rem;
    background: var(--txtColLight);
    border-radius: 0;
}

.info-artist {
    text-transform: uppercase;
}

.info-title {
    text-transform: lowercase;
    font-weight: bold;
}

.result-specs-front.connection {
    background: transparent;
    display: grid; /* don't touch this */
}

.result-specs-front.connection .spec-song {
    color: var(--txtColDark);
}

.result-specs-front.connection .specs-main {
    border-right: 1px solid var(--txtColDark);
}

.connection .spec-song-bpm,
.connection .spec-album {
    color: inherit;
}

.connection .spec-song-bpm.song {
    filter: none;
    box-shadow: inset 0 0 0 1px #575655;
}

/** connection info popover **/

.connection-edit-form {
    min-height: 37rem;
}

.connection-info {
    display: grid;
    grid-template-rows: 7rem max-content 7rem;
    gap: 1rem;
}

.connection-info-song {
    height: 6rem;
    border-left: 1px solid var(--color-connect);
}

.connection-info-remark {
    display: flex;
    align-items: center;
    height: 0;
    overflow: hidden;
    font-size: 1.2em;
    color: var(--color-connect);
}

.connection-info-remark .icon {
    width: 1em;
    height: 1em;
    fill: var(--txtColLight);
}

.connection-info-remark.has-text {
    height: auto;
    padding: 0.5rem 0;
    align-items: center;
    gap: 0.8rem;
}

.connection-edit-form .action-btn {
    position: absolute;
    right: 3rem;
    bottom: 3rem;
    width: 6rem;
    height: 6rem;
    border-radius: 1.5rem;
}

/** login popup **/

.login-form {
    padding-top: 5rem;
}

.register-form {
    padding-top: 2rem;
}

.register-navigation-actions,
.login-navigation-actions {
    display: flex;
    gap: 2rem;
}

.register-form .action-btn,
.login-form .action-btn,
.login-navigation-actions .action-btn {
    border-radius: 1.5rem;
    width: 6rem;
    height: 6rem;
    border: none;
    color: var(--txtColDark);
    box-shadow: var(--bShad-yellow);
}

.registered-keys-list .action-btn:active,
.register-form .action-btn:active,
.login-form .action-btn:active,
.login-navigation-actions .action-btn:active {
    color: rgb(88 87 87);
    box-shadow: var(--bShad-yellow-inset);
    transition: all 0.1s;
}

.login-options {
    display: flex;
    justify-content: space-around;
    padding: 5rem 0;
}

.login-option-card {
    width: 20rem;
    height: 20rem;
}

.registered-keys {
    margin-top: 4rem;
}

.registered-keys-list {
    display: grid;
    font-weight: bold;
    font-size: 2rem;
}

.registered-keys-list-item {
    display: flex;
    gap: 4rem;
    align-items: center;
}

.registered-keys-list-item .action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    border: none;
    width: 3.5rem;
    height: 3.5rem;
    box-shadow: var(--bShad-yellow);
    color: red;
}

.form-label-icon {
    width: 3.5rem;
    height: 3.5rem;
}